<template>
    <el-form
        ref="smsLoginForm"
        :model="smsFormData"
        status-icon
        :rules="smsRules"
        label-width="120px"
        class="demo-smsFormData"
      >
      <!-- 手机号 -->
      <el-form-item label="海贼王手机号" prop="phone" class="captcha-for-item">
        <div>
        <el-input v-model="smsFormData.phone"  maxlength="11"/>
        <b>点击发送</b>
        </div>
        </el-form-item>

        <!-- 输入验证码 -->
        <el-form-item label="海贼王验证码" prop="code" class="password-for-item">
          <el-input v-model="smsFormData.code"
          maxlength="5"
            type="text"
            autocomplete="off" />
        </el-form-item>
       
        <el-form-item>
          <el-button type="primary" @click="submitForm(smsLoginForm)"
            >启航</el-button
          >
        </el-form-item>
      </el-form>
  </template>
  <script  setup>

import * as api from "@/api/users.js"



  import { reactive, ref } from 'vue'
  
  // 引入校验函数
  import {smsRules,useSubmitForm}from "../../composition/login/validate.js"


  console.log(api);
  
  //  表单校验成功之后，回调的方法
  let validatesSuccess = ()=>{
    console.log('校验成功');
  }
  
  
  // 表单校验失败，回调的方法
  let validateFailed = ()=>{
  console.log('校验失败');
  }
  // 使用submitFrom
  
  let submitForm = useSubmitForm(validatesSuccess,validateFailed)
  
  const smsLoginForm = ref()
  
  // 注入到表单的数据
  const smsFormData = reactive({
    phone: '',
    code: '',
  })
  
  </script>
  <style lang="scss" scoped>
  #app{
      height: 100%;
  }
  .video{
      width: 100%;
  //    height: 100%;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     position: fixed;
  }
  .em{
      width: 400px;
      height: 500px;
      background-color: rgb(0, 0, 0,0.3);
      position: fixed;
      top: 300px;
      right: 200px;
  }
  h1{
      color: red;
      text-align:center;
      padding: 80px 0px 60px 0px
      
      
  }
  // 定制组件，修改样式的思路
  // 1.找到对应组件结构的类名
  // 2.重新编写样式，覆盖原来的样式
  
  // 样式修改不成功的因素和解决方案
  
  // 1.确认类名是否正确
  
  // 2.确认权重是否足够 ！important
  
  // 3.是否需要使用深度选择器 xx :deep(选择器) scoped样式，层级嵌套比较深的时候
    //   .username-for-item{
    //       .el-input{
    //           width: 200px !important;
    //           :deep(.el-input__inner){
    //               color: blue;
    //           }
    //       }
    //   }
      .password-for-item{
          .el-input{
              width: 200px !important;
              :deep(.el-input__inner){
                  color: red;
              }
          }
      }
      .captcha-for-item{
          .el-input{
              width: 120px !important;
              :deep(el-input__wrapper){
                box-shadow: none;
            }
              :deep(.el-input__inner){
                  color: green;
                  
              }

          }
          div{
            width: 200px !important;
            background-color: white ;
            border-radius: 5px;
          }
          .b{
            width: 50px ;
            text-align: center ;
          }
      }
  
  </style>
    